<template>
	<div>
		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />
			<div>
				<el-button type="primary" @click="getExport">{{ $t('machine.online.export')}}</el-button>
			</div>
		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" height="730"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="online_id" label="ID" />

				<el-table-column prop="machine_id" :label="$t('machine.code')">
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="machine_name" :label="$t('machine.name')">
					<template #default="scope">
						{{ scope.row.machine_name || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="ckc_duration" :label="$t('machine.online.setOperatingHours')">
					<template #default="scope">
						{{ level.gettohms(scope.row.ckc_duration) }}
					</template>
				</el-table-column>

				<el-table-column prop="manager_id" :label="$t('machine.online.admin')" v-if="false">
					<template #default="scope">
						{{ getname(scope.row.manager_id) }}
					</template>
				</el-table-column>

				<el-table-column prop="duration" :label="$t('machine.online.online')">
					<template #default="scope">
						{{ level.gettohms(scope.row.duration) }}
					</template>
				</el-table-column>
				<el-table-column prop="online_frequency" :label="$t('machine.online.onlineVisits')"/>

				<el-table-column prop="online_date" :label="$t('date.businessDate')">
					<template #default="scope">
						{{ level.gettime(scope.row.online_date, 3) }}
					</template>
				</el-table-column>

				<el-table-column prop="create_time" :label="$t('date.createTime')">
					<template #default="scope">
						{{ level.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')" v-prmis="'machine_online_details'">
					<template #default="scope">
						<el-button type="primary" size="small" @click="getduration(scope.row.online_id)">{{ $t('public.details') }}</el-button>
					</template>
				</el-table-column>

			</el-table>
			<PageNum :total="data.total" :page="data.online" @exposeData="current" @fraction="fraction" />

		</div>


		<el-dialog v-model="data.demonstrate" :title="$t('machine.online.onlineDetails')" center width="60%" style="margin-top: 60px;">

			<el-table v-loading="data.detloading" v-if="data.demonstrate" :data="data.details"
				:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" class="w-full">

				<el-table-column prop="online_time" :label="$t('machine.online.onlineTime')">
					<template #default="scope">
						{{ level.gettime(scope.row.online_time, 2) }}
					</template>
				</el-table-column>

				<el-table-column prop="offline_time" :label="$t('machine.online.offlineTime')">
					<template #default="scope">
						{{ level.gettime(scope.row.offline_time, 2) }}
					</template>
				</el-table-column>

				<el-table-column prop="duration" :label="$t('machine.online.onlineDuration')">
					<template #default="scope">
						{{ level.gettohms(scope.row.duration) }}
					</template>
				</el-table-column>

				<el-table-column prop="heart_time" :label="$t('machine.online.heartbeatTime')">
					<template #default="scope">
						{{ level.gettime(scope.row.heart_time, 2) }}
					</template>
				</el-table-column>

				<el-table-column prop="d_date" :label="$t('date.onlineDate')">
					<template #default="scope">
						{{ level.gettime(scope.row.heart_time, 1) }}
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.detotal" :page="data.deinfo" @exposeData="currdet" />

		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import { exportByMachine } from '@/api/machine_online'
import level from '@/utils/level';
import { ElMessage, ElMessageBox } from "element-plus";
import { getonlineList, getListdetails } from '@/api/machine_online';
import { getmanagerList } from '@/api/manager';
import exports from '@/components/export.vue';
const dialogExport = ref(false)
let data = reactive({
	mtloading: false, // 加载
	demonstrate: false, // 弹窗
	detloading: false, // 弹窗加载
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('date.onlineTime'), type: 'time', value: '', key: 'online_date' },
	],
	list: [], // 列表信息
	rolelist: [], // 管理员信息
	details: [], // 在线详情
	online: { // 筛选数据
		m_id: '',
		online_date: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	deinfo: { // 在线详情筛选数据
		online_id: '',
		page: 1,
		pageNum: 15
	},
	detotal: 0, // 总条数
})
let getExport = () => {
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportByMachine(data.online).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getonlineList(data.online).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 获取管理员信息
let getobjlist = () => {
	getmanagerList().then(res => {
		if (res.state == 200) {
			data.rolelist = res.data
		}
	})
}

// 获取管理员名称
let getname = (e) => {
	let name = '--'
	for (let item of data.rolelist) {
		if (item.manager_id == e) {
			name = item.nickname
		}
	}
	return name
}

// 查询回调
let inves = (e) => {
	data.online.online_date = ''
	if (e.online_date != '') {
		data.online.online_date = e.online_date[0] + '~' + e.online_date[1]
	}
	data.online.m_id = e.m_id || ''
	data.online.page = 1
	data.online.pageNum = 15
	getlist()
}

// 获取在线详情
let getduration = (e) => {
	data.deinfo.online_id = e
	data.demonstrate = true
	data.detloading = true
	getListdetails(data.deinfo).then(res => {
		data.detloading = false
		if (res.state == 200) {
			data.details = res.data.data
			data.detotal = res.data.total
		}
	}).catch(err => {
		data.detloading = false
	})
	console.log(e)
}

// 页数回调
let current = (e) => {
	data.online.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.online.pageNum = e
	getlist()
}

// 在线详情页数回调
let currdet = (e) => {
	data.deinfo.page = e
	getduration(data.deinfo.online_id)
}

getobjlist()
getlist()

</script>
